<template>
  <div>
    <el-form ref="form" :rules="rules" :model="form" label-width="120px">
      <el-form-item label="正文地址" prop="bodyUrl">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-input
              v-model="form.bodyUrl"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="3">
            <el-button type="success" plain @click="handlePreview(1)"
              >预览</el-button
            >
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="标题选择器" prop="titleSelector">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-input
              v-model="form.titleSelector"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="3">
            <el-button type="success" plain @click="handlePreview(2)"
              >预览</el-button
            >
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="内容选择器" prop="bodySelector">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-input
              v-model="form.bodySelector"
              placeholder="请输入内容"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="3">
            <el-button type="success" plain @click="handlePreview(3)"
              >预览</el-button
            >
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="作者">
        <el-row :gutter="20">
          <el-col :span="11">
            <el-input
              v-model="form.author"
              placeholder="请输入起始标记"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="11">
            <el-input
              v-model="form.authorEnd"
              placeholder="请输入结束标记"
              clearable
            ></el-input>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="来源">
        <el-row :gutter="20">
          <el-col :span="11">
            <el-input
              v-model="form.source"
              placeholder="请输入起始标记"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="11">
            <el-input
              v-model="form.sourceEnd"
              placeholder="请输入结束标记"
              clearable
            ></el-input>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="发布时间">
        <el-row :gutter="20">
          <el-col :span="11">
            <el-input
              v-model="form.pusTime"
              placeholder="请输入起始标记"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="11">
            <el-input
              v-model="form.pusTimeEnd"
              placeholder="请输入结束标记"
              clearable
            ></el-input>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>

    <el-button type="custom" v-preventReClick @click="submitForm('form')"
      >提 交</el-button
    >
    <el-button type="primary" plain v-preventReClick @click="handlePrev()"
      >上一步</el-button
    >
  </div>
</template>
<script>
import dataManage from '../Public/dataManage'
import collectPreview from '../Public/preview'
export default {
  mixins: [collectPreview, dataManage],
  data() {
    return {
      form: {
        bodyUrl: '',
        titleSelector: '',
        bodySelector: '',
        author: '', //作者
        authorEnd: '',
        source: '', //来源
        sourceEnd: '',
        pusTime: '', //发布时间
        pusTimeEnd: '',
      },
      rules: {
        bodyUrl: [
          { required: true, message: '请输入正文地址', trigger: 'blur' },
        ],
        titleSelector: [
          { required: true, message: '请输入标题选择器', trigger: 'blur' },
        ],
        bodySelector: [
          { required: true, message: '请输入内容选择器', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    init(row) {
      if (row.hasOwnProperty('id')) {
        this.form = Object.assign({}, row.ruleVO)
      } else {
        this.form = this.$options.data().form
      }
      if (this.taskRow.hasOwnProperty('name')) {
        this.form = { ...this.form, ...this.taskRow.ruleVO }
      }
    },
    //提交
    submitForm() {
      // console.log(this.taskRow)
      // return
      this.validateForm(async () => {
        let dispatchType = this.flag ? 'updateTestPaper' : 'addTestPaper'
        await this.$store.dispatch(dispatchType, this.taskRow)
        this.$store.commit('SET_ACTIVENAME', 'manage')
      })
    },
    //上一步
    handlePrev() {
      this.validateForm(this.$parent.lastStep)
    },
    //预览
    handlePreview(type) {
      let data = {
        baseUrl: this.form.bodyUrl,
      }
      let tips = !this.form.bodyUrl ? '正文地址不能为空' : ''
      if (type == 2) {
        tips = !this.form.titleSelector ? '标题选择器不能为空' : tips
        this.$set(data, 'pageSelector', this.form.titleSelector)
      } else if (type == 3) {
        tips = !this.form.bodySelector ? '内容选择器不能为空' : tips
        this.$set(data, 'pageSelector', this.form.bodySelector)
      }
      tips ? this.warnMsg(tips) : this.pagePreview(data)
    },
  },
}
</script>
<style scoped lang="scss">
</style>